<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js-73仿FLASH图片滚动效果</title>
	<link rel="stylesheet" type="text/css" href="flash.css">
	<script type="text/javascript" src="move.js"></script>
	<script type="text/javascript">
		function getByClass(oParent,sClass){
           var aEle = oParent.getElementsByTagName('*');
           var aResult=[];

           for (var i = 0 ; i < aEle.length; i++) {
           	   if (aEle[i].className==sClass) {
           	   	  aResult.push(aEle[i]);
           	   }
           }
           return aResult;
		};
        

         window.onload=function(){

         	var oBanner = document.getElementById('banner');
         	var oBtnPrev = getByClass(oBanner,'prev')[0];
         	var oBtnNext = getByClass(oBanner,'next')[0];
         	var oMarkPrev = getByClass(oBanner,'markprev')[0];
         	var oMarkNext = getByClass(oBanner,'marknext')[0];

            //第一步，操作鼠标移入大图区域，左侧出现左箭头
            oBtnPrev.onmouseover=oMarkPrev.onmouseover=function(){
            	startMove(oBtnPrev,"opacity",100);
            };
            oBtnPrev.onmouseout=oMarkPrev.onmouseout=function(){
            	startMove(oBtnPrev,"opacity",0);
            };
            //第一步，操作鼠标移入大图区域，右侧出现右箭头
            oBtnNext.onmouseover=oMarkNext.onmouseover=function(){
            	startMove(oBtnNext,"opacity",100);
            };
            oBtnNext.onmouseout=oMarkNext.onmouseout=function(){
            	startMove(oBtnNext,"opacity",0);
            };


            var oDivBig = getByClass(oBanner,'bigimg')[0];
            var aDivBigLi = oDivBig.getElementsByTagName('li');
            var aDivBigLiSpan = oDivBig.getElementsByTagName('span');
            var aDivBigLiStrong = oDivBig.getElementsByTagName('strong');
            var oDivSmall = getByClass(oBanner,'smallimg')[0];
            var aDivSmallLi = oDivSmall.getElementsByTagName('li');
            console.dir(aDivSmallLi);

            var zindex=1;
            var now=0 
             
            //小图无缝滚动，需要计算所有li的总的宽度
            oDivSmall.style.width=aDivSmallLi.length*(aDivSmallLi[0].offsetWidth+10)+'px';
            console.log(aDivSmallLi.length*(aDivSmallLi[0].offsetWidth+10));

            for (var i = 0 ; i < aDivSmallLi.length; i++) {
            	aDivSmallLi[i].index=i;
            

            	aDivSmallLi[i].onclick=function(){

            	   if (this.index==now) return;
                   now = this.index;
            	   tab();

            	   //以下数据被封装成tab();
            	   // aDivBigLi[this.index].style['z-index']=zindex++;

                //    for (var j = 0; j < aDivSmallLi.length; j++) {
                //    	startMove(aDivSmallLi[j],"opacity",30);
                //    }

                //    startMove(this,"opacity",100);

            	   // aDivBigLi[this.index].style.width=0;
            	   // startMove(aDivBigLi[this.index],"width",400);
                };


            	aDivSmallLi[i].onmouseover=function(){

                   for (var j = 0; j < aDivSmallLi.length; j++) {
                   	startMove(aDivSmallLi[j],"opacity",30);
                   }

                   startMove(this,"opacity",100);

                };



                aDivSmallLi[i].onmouseout=function(){
                	if (this.index!=now) {
                		startMove(this,"opacity",30);
                	}else{
                		startMove(this,"opacity",100);
                	}
                   
                };

            };


            function tab(){
        	aDivBigLi[now].style['z-index']=zindex++;

                   for (var j = 0; j < aDivSmallLi.length; j++) {
                   	startMove(aDivSmallLi[j],"opacity",30);
                   }

                   startMove(aDivSmallLi[now],"opacity",100);

            	   aDivBigLi[now].style.width=0;
            	   //这里应该填写400，startMove存在一个计算BUG，后期解决
            	   startMove(aDivBigLi[now],"width",400);
                   aDivBigLiSpan[now].style.display="block";
                   aDivBigLiStrong[now].style.display="block";
                      if (now==0) {
                      	startMove(oDivSmall,'left',0);
                      	console.log('条件1')
                      }else if(now>=aDivSmallLi.length-2){
                        startMove(oDivSmall,'left',-(now-3)*(aDivSmallLi[0].offsetWidth+10));
                      	console.log('条件2');
                      	//条件二存在BUG，目前无法解决！
                      }else{
                      	startMove(oDivSmall,'left',-(now-1)*(aDivSmallLi[0].offsetWidth+10));
                      	console.log('条件3')
                      }
                   	  
                   	  console.log((now-1)*(aDivSmallLi[0].offsetWidth+10))
               
                   //console.log(now)

        };



            oBtnPrev.onclick=function(){
                    now--;
		            if (now<0) {
		                now=aDivSmallLi.length-1;
		            }
		            tab();
		            console.log(aDivSmallLi.length);
		            
            }

            oBtnNext.onclick=function(){
                    now++;
		            if (now==aDivSmallLi.length) {
		                now=0;
		            }
		            tab();
		            console.log(aDivSmallLi.length);

            }
       


            var timer=setInterval(oBtnNext.onclick,3000);

            banner.onmouseover=function(){
            	clearInterval(timer);
            }

            banner.onmouseout=function(){
            	 timer=setInterval(oBtnNext.onclick,3000);
            }

         };
	</script>
</head>
<body>
	<div id="banner">
        <a href="javascript:;" class="prev"></a>
        <a href="javascript:;" class="next"></a>
        <div class="markprev"></div>
        <div class="marknext"></div>
		<ul class="bigimg">
				<li style="z-index: 1">
					<a href="javascript:;"><img src="images/avatar_1.jpg" alt=""></a>
					<strong style="display: block;">标题1</strong>
					<span style="display: block;"></span>
				</li>
				<li><a href="javascript:;"><img src="images/avatar_2.jpg" alt=""></a>					
					<strong>标题2</strong>
					<span></span>
				</li>
				<li><a href="javascript:;"><img src="images/avatar_3.jpg" alt=""></a>
					<strong>标题3</strong>
					<span></span>
				</li>
				<li><a href="javascript:;"><img src="images/avatar_4.jpg" alt=""></a>
					<strong>标题4</strong>
					<span></span>
				</li>
				<li><a href="javascript:;"><img src="images/avatar_5.jpg" alt=""></a>
					<strong>标题5</strong>
					<span></span>
				</li>
				<li><a href="javascript:;"><img src="images/user-avatar.jpg" alt=""></a>
					<strong>标题6</strong>
					<span></span>
				</li>
		</ul>
		<div class="divsmall">
			<ul class="smallimg">
					<li style="filter:alpha(opacity=100);opacity:1"><a href="javascript:;"><img src="images/avatar_1.jpg" alt=""></a></li>
					<li><a href="javascript:;"><img src="images/avatar_2.jpg" alt=""></a></li>
					<li><a href="javascript:;"><img src="images/avatar_3.jpg" alt=""></a></li>
					<li><a href="javascript:;"><img src="images/avatar_4.jpg" alt=""></a></li>
					<li><a href="javascript:;"><img src="images/avatar_5.jpg" alt=""></a></li>
					<li><a href="javascript:;"><img src="images/user-avatar.jpg" alt=""></a></li>
			</ul>
		</div>
	</div>
</body>
</html>